<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--头部固定引用-->
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../plugin/mescroll/css/mescroll.min.css">
    <title>上市公司财报解读</title>
    <style>

        /*财报解读--开始*/
        .data-table-wrap img {
            width: inherit;
            height: inherit;
        }

        .data-rechead-box {
            height: 1.14rem;
            padding: 0 .32rem;
            background: white;
        }

        .data-rechead-til {
            height: 1.14rem;
            line-height: 1.14rem;
            color: rgba(34, 34, 34, 1);
        }

        .data-rechead-more {
            height: .36rem;
            line-height: .36rem;
            color: rgba(34, 34, 34, 0.7);
        }

        .data-listhead-wrap {
            padding: 0 .32rem;
            background: rgba(245, 245, 245, 1);
        }

        .data-listhead-name {
            width: 1.71rem;
            line-height: .28rem;
            color: rgba(34, 34, 34, 0.6);
            background: rgba(245, 245, 245, 1);
            padding: .2rem .1rem;
        }

        .data-list-wrap {
            padding: 0 .32rem;
            background: white;
        }

        .data-list-item {
            padding: .22rem .16rem;
            line-height: .32rem;
            border-bottom: solid 1px #f6f6f6;
        }

        .data-list-name {
            width: 1.71rem;
            color: rgba(34, 34, 34, 1);
            line-height: .32rem;
        }

        .data-list-val {
            width: 1.71rem;
            color: rgba(34, 34, 34, 1);
            padding-right: .12rem;
        }

        .data-list-item .active {
            color: rgba(236, 62, 51, 1);
        }

        .data-model-wrap {
            background: rgba(255, 255, 255, 1);
            padding: 0.7rem .32rem;
        }

        .data-model-item {
            width: 162px;
            height: 74px;
            background: rgba(243, 246, 251, 1);
            border-radius: 2px;
        }

        .data-model-title {
            height: 21px;
            color: rgba(34, 34, 34, 1);
            line-height: 21px;
            margin-top: .32rem;
            margin-left: .30rem;
        }

        .data-model-desc {
            height: 17px;
            color: rgba(135, 135, 135, 1);
            line-height: 17px;
            margin-top: .06rem;
            margin-left: .30rem;
        }

        /*财报解读--结束*/


    </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div class="flex-column h-100-p">

    <!--状态栏-->
    <div class="placeholder-top">
        <!--状态栏-->
        <div class="bg-main status-bar pos-f"></div>
        <!--导航栏-->
        <div class="bg-main nav-bar pos-f flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1">上市公司财报解读</div>
            <div class="right-bar">
            </div>
        </div>
    </div>

    <div class="flex-row justify-content-center data-listhead-wrap"></div>

    <div id="mescroll" class="mescroll flex-1">
        <div class="flex-column data-list-wrap"></div>
        <div class="more">- 暂无更多数据 -</div>
    </div>
</div>
</body>
<!--下面四个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--固定引用结束-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/touchRefresh.js"></script>
<script src="../../js/template.js"></script>
<script src="../../plugin/mescroll/js/mescroll.min.js"></script>
<script>

  let meScroll

  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()

    //下拉刷新
    meScroll = Template.createNoScroll({
      id: 'mescroll', //区域ID
      pageNum: 1,
      downCallback: getFinancialReportData, //下拉刷新入口
    })
  }

  function reLoadPage(){
    getFinancialReportData()
  }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {

  }

  //上市公司财报解读
  function getFinancialReportData() {
    Server.financialReport.getAppInancialReport({}).then(function (data) {

      let htmlStr = ''
      $.each(data.appInancialReportList, function (i, item) {

        if (i === 0) {
          htmlStr =
                '            <div class="flex-row  align-items-center data-listhead-name fs11 ff400">' + item.industry + '</div>\n' +
                '            <div class="flex-row  align-items-center data-listhead-name fs11 ff400">' + item.industryData1 + '</div>\n' +
                '            <div class="flex-row  align-items-center data-listhead-name fs11 ff400">' + item.industryData2 + '</div>\n' +
                '            <div class="flex-row  align-items-center data-listhead-name fs11 ff400">' + item.industryData3 + '</div>'
          $('.data-listhead-wrap').html(htmlStr)
          htmlStr = ''
        } else {
          htmlStr +=
                '            <div class="flex-row justify-content-between data-list-item align-items-center">\n' +
                '                <div class="data-list-name fs14 ff400">' + item.industry + '</div>\n' +
                '                <div class="flex-row justify-content-end data-list-val fs14 ff600 active">' + item.industryData1 + '</div>\n' +
                '                <div class="flex-row justify-content-end data-list-val fs14 ff600">' + item.industryData2 + '</div>\n' +
                '                <div class="flex-row justify-content-end data-list-val fs14 ff600">' + item.industryData3 + '</div>\n' +
                '            </div>'
        }
        $('.data-list-wrap').html(htmlStr)
      })

      meScroll.endSuccess()
    }).catch((error) => {
      meScroll.endErr()
    })
  }

</script>
</html>
